<template>
  <div class="layout">
    <div
      class="row"
      v-for="(client, clientIndex) in supportForm.clients"
      :key="clientIndex"
    >
      <div
        class="col"
        v-if="client == item.client"
        v-for="(item, index) in formValidate"
        :key="index"
      >
        <Card :padding="0">
          <div>
            <!-- app -->
            <div
              class="icon-item"
              v-if="client == item.client && item.client == 'APP'"
            >
              <img
                class="icon"
                src="../../../../assets/setting/app.svg"
                alt=""
                srcset=""
              />
            </div>
            <div
              class="icon-item"
              v-if="client == item.client && item.client == 'PC'"
            >
              <!-- pc -->
              <img
                class="icon"
                src="../../../../assets/setting/pc.svg"
                alt=""
                srcset=""
              />
            </div>
            <div
              class="icon-item"
              v-if="client == item.client && item.client == 'WECHAT_MP'"
            >
              <!-- 小程序 -->

              <img
                class="icon"
                src="../../../../assets/setting/wechat_mp.svg"
                alt=""
                srcset=""
              />
            </div>

            <div
              class="icon-item"
              v-if="client == item.client && item.client == 'H5'"
            >
              <!-- h5 -->

              <img
                class="icon"
                src="../../../../assets/setting/h5.svg"
                alt=""
                srcset=""
              />
            </div>
            <div class="pay-title" v-if="client == item.client">
              {{ way[item.client] }}
            </div>

            <div v-if="client == item.client">
              <Divider orientation="left">支付设置</Divider>

              <div class="pay-list">
                <CheckboxGroup
                  @on-change="handleChangePayType"
                  v-model="item.supports"
                >
                  <Checkbox
                    v-for="(support, i) in supportForm.payments"
                    :key="i"
                    :label="support"
                  >
                    {{ payWay[support] || support }}
                  </Checkbox>
                </CheckboxGroup>
              </div>
            </div>
          </div>
        </Card>
      </div>
    </div>
  </div>
</template>
<script>
import { setSetting } from "@/api/index";
import { handleSubmit } from "../setting/validate";
import { getPaymentSupportForm } from "@/api/setting";
export default {
  data() {
    return {
      ruleValidate: {}, // 验证规则
      way: {
        // 类型
        APP: "移动应用端",
        H5: "移动端",
        WECHAT_MP: "小程序端",
        PC: "PC端",
      },
      formValidate: {}, // 表单数据
      // key obj
      payWay: {
        // 支付方式
        ALIPAY: "支付宝支付",
        WECHAT: "微信支付",
        WALLET: "余额支付",
      },
      supportForm: "", // 支持的支付方式
    };
  },
  props: ["res", "type"],
  created() {
    this.init();
  },
  methods: {
    submit(name) {
      let that = this;
      if (handleSubmit(that, name)) {
        this.setupSetting();
      }
    },
    // 修改支付设置
    handleChangePayType(val) {
      this.$Modal.confirm({
        title: "修改支付设置",
        content: "您是否修改此项？",
        loading: true,
        onOk: () => {
          this.setupSetting();
        },
        onCancel: () => {
          val.splice(val.length - 1, 1);
        },
      });
    },
    // 保存设置
    setupSetting() {
      setSetting(this.type, { paymentSupportItems: this.formValidate }).then(
        (res) => {
          if (res.success) {
            this.$Message.success("保存成功!");
            this.$Modal.remove();
          } else {
            this.$Message.error("保存失败!");
            this.$Modal.remove();
          }
        }
      );
    },
    // 实例化数据
    async init() {
      this.formValidate = JSON.parse(this.res).paymentSupportItems;

      console.log(this.formValidate);

      await getPaymentSupportForm().then((res) => {
        // res.result.payments = ["H5", "PC"];
        this.supportForm = res.result;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../setting/style.scss";
.pay-title {
  text-align: center;
  margin: 10px 0;
}
.layout {
  padding: 20px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.row {
  width: 300px;
  margin-right: 20px;
  display: flex;
  margin-bottom: 20px;
  ::v-deep .ivu-card-body {
    padding: 0 16px !important;
  }
}

.label-item {
  display: flex;
}
.label-item {
  display: flex;
  align-items: center;
}
.pay-list {
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
}
.icon-item {
  width: 100%;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.ivu-form-item {
  display: flex;

  align-items: center;
}
.ivu-row {
  width: 100%;
}
.icon {
  width: 100px;
  height: 100px;
}
</style>
